<%--
  Created by IntelliJ IDEA.
  User: 14274
  Date: 2023/8/15
  Time: 9:05
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>$Title$</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
            box-sizing: border-box;
        }
        li{
            list-style: none;
        }
        .body{
            margin: 0px auto;
            width: 800px;
            height: 400px;
            position: relative;
        }
        .title{
            text-align: center;
        }
        .search{
            margin: 0px auto;
            width: 380px;
            height: 50px;
        }
        .information{
            margin-left: 65px;
        }

        .information table tr td{
            width: 100px;
            text-align: center;
        }
        .fenye{
            width: 270px;
            position: absolute;
            left: 269px;
            bottom: 0px;
        }
        .fenye ul li{
            float:left;
            margin-left: 10px;
        }
        .result{
            /*display: none;*/
        }

    </style>
</head>
<body>
<div class="body">
    <div class="title">
        <h1>空气质量监测信息库</h1>
    </div>
    <div class="search">

        <form id="search-form" action="selectDisAndAQ" method="post">
            <span>按区域查找</span>
            <input type="hidden" name="pagenum" id="cp" value=""/>
            <select name="name" id="search-select">
                <option>不限</option>
                <option>西城区</option>
                <option>东城区</option>
                <option>海淀区</option>
                <option>丰田区</option>
            </select>
            <input type="button" id="search" value="查找"/>
            <a href="add.jsp">添加空气质量信息</a>
        </form>

    </div>
    <div class="information">
        <table>
            <tr>
                <td>序号</td>
                <td>区域</td>
                <td>检测时间</td>
                <td>PM10数据</td>
                <td>PM2.5数据</td>
                <td>监测站</td>
                <td>操作</td>
            </tr>
            <c:if test="${pageInfo.list.size()!=0}">
                <c:forEach items="${pageInfo.list}" var="district">
                    <tr>
                        <td><c:out value="${district.aqIndex.id}"/></td>
                        <td><a href="#"><c:out value="${district.name}"/></a></td>
                        <td><c:out value="${district.aqIndex.monitorTime}"/></td>
                        <td><c:out value="${district.aqIndex.pm10}"/></td>
                        <td><c:out value="${district.aqIndex.pm25}"/></td>
                        <td><c:out value="${district.aqIndex.monitoringStation}"/></td>
                        <td><a href="findAQ?pm10=${district.aqIndex.pm10}">更新</a></td>
                    </tr>
                </c:forEach>
            </c:if>
            <c:if test="${pageInfo.list.size()==0}">
                <tr class="result">
                    <td colspan="7">
                        <div>
                            <h2>抱歉！暂无信息</h2>
                        </div>
                    </td>
                </tr>
            </c:if>

        </table>

    </div>
    <div class="fenye">
        <ul>
            <li id="firstPage"><a href="#">首页</a></li>
            <li id="prePage"><a href="#">上页</a></li>
            <li id="nextPage"><a href="#">下页</a></li>
            <li id="lastPage"><a href="#">末页</a></li>
            <li>第${pageInfo.pageNum}页/共${pageInfo.pages}页</li>
        </ul>
    </div>
</div>
</body>
</html>
<script src="static/js/jquery-1.12.4.js"></script>
<script>
    $(function(){
        if ("${name}"==""){

        }else {
            $("#search-select").val("${name}")
        }
    })
    //未查询到联系人显示提示
    <%--if(${size==0}){--%>
    <%--    $(".result").show();--%>
    <%--}--%>
    //表单验证
    // function checknull(){
    //     var names = $("#name").val();
    //     if(names==null||names==""){
    //         alert("请填写搜索关键字")
    //     }else {
    //         $("#search-form").submit();
    //     }
    // }
    $(function(){
        $("#search").click(function(){
            // checknull();
            $("#search-form").submit();
        })

    })
    //隔行变色
    $(".information table tr:not(:first,:odd)").css("backgroundColor","rgb(135, 255, 124)");
    $(".information table tr:first").css("backgroundColor","rgb(173,216,230)");
    //页码跳转
    $("#firstPage").click(function(){
        $("#cp").val(1);
        $("#search-form").submit();
    })
    $("#prePage").click(function(){
        $("#cp").val(${pageInfo.prePage});
        $("#search-form").submit();
    })
    $("#nextPage").click(function(){
        $("#cp").val(${pageInfo.nextPage});
        $("#search-form").submit();
    })
    $("#lastPage").click(function(){
        $("#cp").val(${pageInfo.pages});
        $("#search-form").submit();
    })
</script>